import { EmployeeModel } from '@/pages/person/data';
import { createemployee } from '@/pages/person/service';
import {
  ModalForm,
  ProForm,
  ProFormCheckbox,
  ProFormInstance,
  ProFormRadio,
  ProFormSwitch,
  ProFormText,
} from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { Button, message, TimePicker } from 'antd';
import moment from 'moment';
import React, { useRef, useState } from 'react';
export type EditFormProps = {
  trigger?: JSX.Element;
  onOk?: () => void;
  initialValues?: Partial<EmployeeModel.employeeResponse>;
};

const EditForm: React.FC<EditFormProps> = ({ onOk, trigger, initialValues }) => {
  const [messageApi, contextHolder] = message.useMessage();
  const [modalVisit, setModalVisit] = useState(false);
  const editFormRef = useRef<ProFormInstance>();
  /* const intl = useIntl(); */

  const { run, loading } = useRequest(createemployee, {
    manual: true,
    onSuccess: () => {
      messageApi.success('Added successfully');
      onOk?.();
      setModalVisit(true);
      editFormRef.current?.resetFields();
    },
    onError: () => {
      messageApi.error('Adding failed, please try again!');
    },
  });
  const openChange = (value: boolean) => {
    setModalVisit(value);
    editFormRef.current?.resetFields();
  };

  return (
    <>
      {contextHolder}
      <ModalForm
        initialValues={initialValues}
        formRef={editFormRef}
        title={initialValues ? '修改' : '新增'}
        open={modalVisit}
        onOpenChange={openChange}
        trigger={trigger}
        modalProps={{
          onCancel: () => {},
          okText: '保存',
          okButtonProps: { loading },
          centered: true,
        }}
        onFinish={async (value: EmployeeModel.employeeResponse) => {
          await run(value);
          return true;
        }}
        submitter={{
          render: (props, defaultDoms) => {
            return [
              ...defaultDoms,
              <Button
                key="saveAndContinue"
                type="primary"
                onClick={() => run(editFormRef.current?.validateFieldsReturnFormatValue?.())}
              >
                保存并继续
              </Button>,
            ];
          },
        }}
      >
        <ProFormText
          name="ruleName"
          label="规则名称"
          rules={[{ required: true, message: '请输入规则名称' }]}
          placeholder="请输入规则名称"
          width='md'
        />
        <ProFormSwitch name="isCrossDay" label="是否跨天" />
        <ProFormRadio.Group
          name="scheduleType"
          label="规则配置"
          options={[
            { label: '按月排班', value: 'monthly' },
            { label: '按周排班', value: 'weekly' },
          ]}
          initialValue="weekly"
        />
        <ProFormCheckbox.Group
          name="weekdays"
          label=""
          options={[
            { label: '全选', value: 'all' },
            { label: '周一', value: 'monday' },
            { label: '周二', value: 'tuesday' },
            { label: '周三', value: 'wednesday' },
            { label: '周四', value: 'thursday' },
            { label: '周五', value: 'friday' },
            { label: '周六', value: 'saturday' },
            { label: '周日', value: 'sunday' },
          ]}
        />
        <ProForm.Group>
          <ProForm.Item label="最早签到" name="earliestCheckIn">
            <TimePicker defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} format="HH:mm:ss" />
          </ProForm.Item>
          <ProForm.Item label="最早签退" name="earliestCheckOut">
            <TimePicker defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} format="HH:mm:ss" />
          </ProForm.Item>
        </ProForm.Group>
        <ProForm.Group>
          <ProForm.Item label="上班时间" name="startTime">
            <TimePicker defaultOpenValue={moment('09:00:00', 'HH:mm:ss')} format="HH:mm:ss" />
          </ProForm.Item>
          <ProForm.Item label="下班时间" name="endTime">
            <TimePicker defaultOpenValue={moment('18:00:00', 'HH:mm:ss')} format="HH:mm:ss" />
          </ProForm.Item>
        </ProForm.Group>
        <ProForm.Group>
          <ProForm.Item label="最晚签到" name="latestCheckIn">
            <TimePicker defaultOpenValue={moment('09:10:00', 'HH:mm:ss')} format="HH:mm:ss" />
          </ProForm.Item>
          <ProForm.Item label="最晚签退" name="latestCheckOut">
            <TimePicker defaultOpenValue={moment('22:00:00', 'HH:mm:ss')} format="HH:mm:ss" />
          </ProForm.Item>
        </ProForm.Group>
      </ModalForm>
    </>
  );
};

export default EditForm;
